<template>
    <div class="btn_chose">
        <el-radio-group v-model="radioVal" size="large" @change="echartsMap">
            <el-radio-button label="sale_">销售</el-radio-button>
            <el-radio-button label="_money">销售额</el-radio-button>
        </el-radio-group>
        <el-select @change="echartsMap" v-model="selectVal" class="m-2" placeholder="Select" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>

    <div class="echartMap">
        <div id="main" style="margin-top: 100px; width: 80%;height:400px;"></div>
        <div id="mainMap" style="margin-top: 100px; width: 80%;height:400px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import * as http from "@/request/http"
import type { EChartsOption } from "echarts"
import China from "@/JSON/china.json"
const radioVal = ref("sale_")
const selectVal = ref("yesterday")
const options = [
    { label: "昨天", value: "yesterday" },
    { label: "今天", value: "today" },
    { label: "前三天", value: "three_days" },
    { label: "前六天", value: "sixty_days" },
    { label: "前七天", value: "seven_days" },
    { label: "前十四天", value: "fourteen_days" },
    { label: "前三十天", value: "thirty_days" },
]

let PicData: SalePie[] = []
let myChart: echarts.ECharts;
let myChartMap: echarts.ECharts;
let MapData: SaleMap[] = []
onMounted(() => {
    myChart = echarts.init(document.getElementById('main')!);
    myChartMap = echarts.init(document.getElementById('mainMap')!);
    // 基于准备好的dom，初始化echarts实例
    // 指定图表的配置项和数据

    http.charts.adminStat().then(res => {
        PicData = res.data.salePie
        MapData = res.data.saleMap
        echartsMap()
        echartsChinaMap()
    })
})

echarts.registerMap('China', China as any);

const echartsMap = () => {
    let key = radioVal.value === "sale_" ? radioVal.value + selectVal.value : selectVal.value + radioVal.value
    const data: any = PicData.map(item => {
        return {
            value: item[key],
            name: item.name
        }
    })
    let option: EChartsOption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '3%',
            left: 'right',
            width: "300px",
        },
        emphasis: {
            label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ["40%", "50%"],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

const echartsChinaMap = () => {
    const data = MapData.map(item => ({
        name: item.areaName,
        value: item.saleNum
    }))
    let option: EChartsOption =
    {
        title: { text: '销量', },
        //提示
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        visualMap: {
            min: 5000,
            max: 900000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series: [
            {
                name: '全国销量分布图',
                type: 'map',
                map: 'China',
                // label: {
                //     show: true
                // },
                data,
                nameMap: {
                }
            }
        ]
    }
    myChartMap.setOption(option);

}

</script>

<style scoped lang="less">
.btn_chose {
    display: flex;
    justify-content: flex-start;
    padding: 70px 20px 20px 20px;

    .el-select {
        margin-left: 20px;
    }
}

.echartMap {
    padding: 70px 20px 20px 20px;

}
</style>